<template>
    <view class="content">
        <view style="margin-top: 20rpx;">
            <u-sticky>
                <u-button type="primary" icon="plus-circle" shape="circle" text="新增地址" @click="open_modal(0)"></u-button>
            </u-sticky>
        </view>

        <view class="list">
            <view class="item" v-for="(item, i) in state.addressData">
                <view class="item-info">
                    <text>{{ item.contacts }}</text>
                    <text>{{ item.phone }}</text>

                    <view style="font-weight: normal;">
                        <u-tag v-if="item.default == 1" text="默认" size="mini" icon="star-fill"></u-tag>
                        <u-icon v-if="item.default == 0" bold="false" name="setting" labelSize="6" labelColor="#82848a"
                            label="设为默认"></u-icon>
                    </view>
                </view>
                <view class="item-addr">
                    <text class="addr" style="font-size: small;">{{ item.address }}</text>
                    <u-icon name="edit-pen" color="#2979ff" size="28" @click="open_modal(item)"></u-icon>
                </view>
            </view>
        </view>
        <view>
            <u-modal :show="state.modal.isShow" :title="state.modal.title" @cancel="state.modal.isShow = false"
                @confirm="confirm()" :showCancelButton="true">
                <u-from :model="state.formdata" ref="uFrom">
                    <u-form-item label="联系人" prop="uidcard" labelWidth="70">
                        <u-input v-model="state.formdata.contacts" />
                    </u-form-item>
                    <u-form-item label="联系方式" prop="uaccount" labelWidth="70">
                        <u-input v-model="state.formdata.phone" />
                    </u-form-item>
                    <u-form-item label="收货地址" prop="address" labelWidth="70" @click="open_picker()">
                        <u-input v-model="state.formdata.address" />
                    </u-form-item>
                    <u-form-item label="详细地址" prop="detailAddr" labelWidth="70">
                        <u-textarea v-model="state.formdata.detailAddr" placeholder="请输入内容"></u-textarea>
                    </u-form-item>
                    <u-form-item label="是否默认" prop="default" labelWidth="70">
                        <u-switch v-model="state.formdata.default" @change="!state.formdata.default"></u-switch>
                    </u-form-item>
                </u-from>
            </u-modal>
        </view>
    </view>
    <view>
        <u-picker ref="uPicker" :show="state.picker.show" :columns="state.picker.address" @change="changeHandler"
            @cancel="state.picker.show = false" @confirm="confirm_picker">
        </u-picker>
    </view>
</template>

<script setup>
import { reactive, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getAddressAll, addressSave } from '../../../network/mine'
import { getAddressArea } from '../../../network/golde'

const state = reactive({
    uid: 0,
    modal: {
        isShow: false,
        title: "新增"
    },
    formdata: {
        a_id: 0,
        contacts: '张三',
        phone: '15088886666',
        address: '贵州省贵阳市观山湖区',
        detailAddr: '会展城B3组团1栋2单元3003',
        default: true
    },
    picker: {
        show: false,
        // 地址
        address: [],
        // 省
        province: [],
        // 市
        city: [],
        // 市的索引
        cityIndex: [],
        // 县
        county: [],

    },
    addressData: []
})
// 获取页面的传值
onLoad((option) => {
    state.uid = option.uid;
    getAddressAll({ uid: option.uid }).then((res) => {
        state.addressData = res.data
    })
})
// 打开模态框
const open_modal = (t) => {
    // t为0 为新增收货地址 1为编辑
    state.modal.isShow = true;
    state.formdata.a_id = t;
    state.modal.title = t == 0 ? '添加' : '编辑'
    if (t == 0) {
        state.formdata = {
            a_id: 0,
            contacts: '',
            phone: '',
            address: '',
            detailAddr: '',
            default: false
        }
    } else {
        state.formdata.a_id = t.a_id;
        state.formdata.contacts = t.contacts;
        state.formdata.phone = t.phone;
        state.formdata.address = t.address.split(' ')[0];
        state.formdata.detailAddr = t.address.split(' ')[1];
        state.formdata.default = t.default == 1 ? true : false;
        console.log(t);
    }
}
// 模态框提交数据
const confirm = () => {
    state.modal.isShow = false;
    console.log(state.formdata);
    addressSave({ uid: state.uid, data: state.formdata }).then((res) => {
        console.log(res);
    })
}

const open_picker = () => {
    state.picker.show = true
    // 参考： https://lbs.amap.com/api/webservice/guide/api/district/
    getAddressArea().then((res) => {
        // 省市县三级数据
        let data = res.districts[0].districts;
        data.sort((a, b) => a.adcode - b.adcode) // 排序
        // 省
        state.picker.province = data.map((v) => {
            return v.name
        });
        // 市
        state.picker.city = data.map((v) => {
            v.districts.sort((a, b) => a.adcode - b.adcode) // 排序
            return v.districts.map((v1) => {
                return v1.name
            })
        });
        // 县
        state.picker.county = data.map((v) => {
            return v.districts.map((v1) => {
                v1.districts.sort((a, b) => a.adcode - b.adcode) // 排序
                return v1.districts.map((v2) => {
                    return v2.name
                })
            })
        })
        //将得到的3个数组 3个数组的第一个值 作为初始数据
        state.picker.address = [state.picker.province, state.picker.city[0], state.picker.county[0][0]];
    })
}

// 通过getCurrentInstance访问内部组件，相当于vue2中的$refs
const { proxy } = getCurrentInstance()
// picker change事件
const changeHandler = (e) => {
    const {
        columnIndex,
        value,
        values, // values为当前变化列的数组内容
        index,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = proxy.$refs.uPicker
    } = e
    // 第一列数据变化
    if (columnIndex === 0) {
        // picker为选择器this实例，变化第二列对应的选项
        picker.setColumnValues(1, state.picker.city[index])
        // 变化第三列 先默认选择第一个数据
        picker.setColumnValues(2, state.picker.county[index][0])
        // 记录第一列数据变化的index 在第二列数据变化时来改变数据
        state.picker.cityIndex = index;
    }
    // 第二列数据变化
    if (columnIndex === 1) {
        // 第二列数据变化时 需要知道第一列数据变化的索引用来取出数据
        picker.setColumnValues(2, state.picker.county[state.picker.cityIndex][index])
    }

}
// picker 确定按钮提交时赋值
const confirm_picker = (e) => {
    state.picker.show = false;
    state.formdata.address = e.value[0] + e.value[1] + e.value[2]
}

</script>

<style lang="scss" scopedd>
.content {
    .list {
        padding: 10rpx;

        .item {
            margin-top: 20rpx;
            width: 100%;
            height: 200rpx;
            display: grid;
            background-color: #f3f4f6;
            box-shadow: 4px 4px 15px rgb(124, 122, 122);

            .item-info {
                display: grid;
                margin-top: 15rpx;
                font-weight: bold;
                font-size: large;
                grid-auto-flow: column;
                grid-auto-columns: 20% 55% 25%;
                place-items: center;
            }

            .item-addr {
                color: rgb(135, 134, 134);
                display: grid;
                grid-auto-flow: column;
                grid-auto-columns: 82% 18%;
                place-items: center;
                margin-left: 25rpx;
            }
        }
    }
}
</style>